<template>
	<view>
			<view class="deliver">
				<u-divider text="分割线" :dot="true"></u-divider>
			</view>
			<u-navbar
			    leftText="返回"
			    title="个人中心"
			    :safeAreaInsetTop="false"
			>
			</u-navbar>
			<view class="personInfobox">
				<view class="avatar">
					<u-avatar :src="src"
					size=65
					></u-avatar>
					<text>{{username}}</text>
					<view class="titlename">
						<view class="titleavatar">
							<u-avatar :src="src" size=20></u-avatar>
						</view>
						<text>{{title}}</text>
					</view>
				</view>
			</view>
			<view class="toolbox">
				<swiper
					:indicator-dots="true"
					class="swiper"
				>
				<swiper-item>
				<u-grid
						:border="true"
						col=4
						@click="click"
				>
					<u-grid-item
							v-for="(baseListItem,baseListIndex) in baseList"
							:key="baseListIndex"
					>
						<u-icon
								:customStyle="{paddingTop:20+'rpx'}"
								:name="baseListItem.name"
								:size="22"
						></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
				</swiper-item>
				</swiper>
			</view>
			<view class="mediumbox">
				  <u-collapse
				    @change="change"
				    @close="close"
				    @open="open"
					border=false
				  >
				    <u-collapse-item
				      title="文档指南"
				      name="Docs guide"
					  icon = "tags"
				    >
				      <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				    </u-collapse-item>
				    <u-collapse-item
				      title="组件全面"
				      name="Variety components"
					  icon = "tags"
				    >
				      <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				    </u-collapse-item>
				    <u-collapse-item
				      title="众多利器"
				      name="Numerous tools"
					  icon = "tags"
				    >
				      <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				    </u-collapse-item>
				  </u-collapse>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://www.xuuyy.icu:7789/processimg/photo.jpg',
				username:"yy",
				title:"小白",
				baseList: [{
						  name: 'photo',
						  title: '图片'
						  },
						  {
							  name: 'lock',
							  title: '锁头'
						  },
						  {
							  name: 'star',
							  title: '星星'
						  },
							{
							name: 'hourglass',
							title: '沙漏'
							},
					  ]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.deliver{
	position: absolute;
	top: 4%;
	width: 100%;
}
.personInfobox {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 200rpx;
  background-color: skyblue;
  border-radius: 30rpx;
  border: 1rpx solid #aaa; /* 2rpx 边框 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

.avatar{
	margin-top: 38rpx;
	margin-left: 40rpx;
	display: flex;
	text{
		margin: 4%;
		font-weight: bolder;
		font-size: 1.5rem;
			}
}
.titlename{
	position: absolute;
	display: flex;
	right: 0;
	top: 38%;
	height: 50rpx;
	width: 25%;
	margin-right: 40rpx;
	.titleavatar{
		margin-top: 18rpx;
	}
	text{
		font-size: 1.3rem;
	}

}
.toolbox{
	margin-top: 360rpx;
	.swiper {
	        height: 150rpx;
	    }
}
.mediumbox{
	width: 100%;
	height: 300rpx;
	position: absolute;
	top: 43%;
}

</style>
